<template>
	<el-container>
		<el-aside width="210px" v-show="asideShow">
			<div style="height: 160px;display: flex;align-items: center;justify-content: center; border-bottom:2px solid #efefef;">
				<img src="../assets/logo2.png" alt="" style="width: 160px;">
			</div>
			<el-menu background-color="#035fa2" :default-active='path' text-color="#ffffff" unique-opened active-text-color="#035fa2"
			 router>
				<template v-for="item in navMenus">
					<el-menu-item :index="'/'+item.route" v-if="!item.child" @click.native='meunClick(item.title)' :key="item.id">
						<span slot="title">{{item.title}}</span>
					</el-menu-item>

					<el-submenu :index='item.title' v-else>
						<template slot="title">
							<span slot="title">{{item.title}}</span>
						</template>
						<el-menu-item-group v-for=" NavChild in item.child" :key="NavChild.id">
							<el-menu-item :index="'/'+ NavChild.route" @click.native='meunClick(NavChild.title)'>
								<span>{{NavChild.title}}</span>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</template>
			</el-menu>
		</el-aside>
		<el-container>
			<el-header>
				<div>
					<el-button type="primary" :icon="arrow" size="mini" @click="asideArrow" class="arrow"></el-button>
				</div>
				<div>
					<el-dropdown @command="handleCommand" placement="bottom-start" trigger="click">
						<span class="el-dropdown-link">
							<i class="el-icon-s-custom el-icon--right" style="padding-right:5px;"></i>个人中心<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="exit" icon="el-icon-switch-button">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>
			<el-main>
				<div style="border-bottom:1px solid #ccc;position:relative;overflow: hidden;">
					<Notice-tip/>
				</div>
				<router-view />
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import navMenus from '../navMenus.js'
	import NoticeTip from './systerSetting/notice.vue'
	export default {
		components: {
			NoticeTip
		},
		data() {
			return {
				path: '',
				name: '',
				userName: localStorage.getItem('userName'),
				asideShow: true,
				arrow: 'el-icon-s-fold',
				navMenus: navMenus,
				img: require('@/assets/logo.png'),
				regionName:'',
			}
		},
		mounted(){
			let token = this.$route.query.token;
			if(token){
				localStorage.setItem('token',token);
			}
		},
		methods: {
			meunClick(name) {
				this.name = name
			},
			exitHandle() {
				this.$confirm('是否需要退出登录?', '退出', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					localStorage.clear();
					this.$router.push('/');
				})
			},
			asideArrow() {
				this.asideShow = !this.asideShow;
				if (this.asideShow) {
					this.arrow = 'el-icon-s-fold';
				} else {
					this.arrow = 'el-icon-s-unfold';
				}
			},
			handleCommand(command) {
				if (command == 'exit') {
					this.exitHandle()
				}
			}
		}
	}
</script>
<style>
	.el-container {
		height: 100%;
		overflow: scroll;
	}
	
	.el-container::-webkit-scrollbar {
		display: none;
	}
	
	.el-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 60px;
		background: #035fa2;
		color: #ffffff;
	}
	
	.cumstexit {
		background-color: #ffffff;
		border-color: #ffffff;
		color: #262D33;
	
	}
	
	.el-aside {
		background-color: #035fa2;
		height: 100%;
		color: #ccc;
		overflow: scroll;
	}
	
	.el-aside::-webkit-scrollbar {
		display: none;
	}
	
	.el-main {
		margin: 0;
		padding: 0;
		height: 100%;
		overflow: scroll;
	}
	
	.el-main::-webkit-scrollbar {
		display: none;
	}
	
	.el-menu-item.is-active {
		background-color: #efefef !important;
	}
	
	ul li {
		list-style: none;
	}
</style>
<style scoped>
	

	.arrow {
		font-size: 20px !important;
		background-color: #035fa2 !important;
		border-color: #ffffff !important;
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #ffffff;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
	.days,.hours,.minutes,.seconds{
		font-size: 20px;
		color: #ffd85e;
		font-weight: bold;
	}
	.el-link{
		margin-left: 40px;
		color: white!important;
	}
</style>
